<template>
  <view class="my-page">
    <view class="key">
      <span class="字">来</span>
      <span class="音">lái</span>
      <span class="双">双</span>
      <span class="人">人</span>
      <span class="成">成</span>
      <span class="行">行</span>
    </view>
	<view class="info">
		抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
	</view>
	<view class="info2">
		2024 - 2025 版权所有 © 成都信息工程大学软件 2 班 www.cuit.com
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
	@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
	$bright : #AFA695;
	$gold : #867862;
	$dark : #746853;
	
	$duration : 8s;
	
	.info{
		position: fixed;
		width: 100%;
		height: 20px;
		bottom: 10px;
		color: #a4aca5;
		text-align: center;
		line-height: 20px;
		font-size: 11px;
	}
	.info2{
		position: fixed;
		width: 100%;
		height: 20px;
		bottom: 10px;
		color: #a4aca5;
		text-align: center;
		line-height: 20px;
		font-size: 11px;
	}
	body, html {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    background: #000;
	    overflow: hidden;
	}
	
	div {
	    margin: auto;
	    perspective: 2000px;
	    transform-style: preserve-3d;
	    font: 10vw Righteous;
	    animation: fade $duration infinite;
	}
	
	span {
	    position: relative;
	    display: inline-block;
	    min-width: .5em;
	    text-align: center;
	    transform-style: preserve-3d;
	    transform:  rotateY(25deg);
	    animation: rotate $duration infinite ease-in;
	    color: black;
	    
	    &:after, &:before {
	        display: block;
	        position: absolute;
	        top: 0;
	        left: 0;
	        content: attr(class);
	        color: $gold;
	        z-index: -1;
	        animation: shadow $duration infinite;
	    }
	    
	    &:before {
	        transform: translateZ(-14px);
	    }
	    &:after {
	        transform: translateZ(-7px);
	    }
	}
	
	@keyframes fade {
	    from {
	        opacity: 0;
	        transform: scale(1.2);
	    }
	    25% { opacity: 1; }
	    100% {
	        transform: scale(1);
	    }
	}
	
	@keyframes rotate {
	    from {
	        transform: rotateY(65deg);
	    }
	    50%, 100% {
	        color: $dark;
	        transform: rotateY(5deg);
	    }
	    100% {
	        color: $gold;
	    }
	}
	
	@keyframes shadow {
	    from {
	        color: shade($gold, 50%);
	    }
	    25% { 
	        color: $bright;
	    }
	    50%, 100% {
	        color: tint($gold, 100%);
	    }
	}
</style>
